﻿<UserControl 
    
        x:Class="AutoCompleteListBuilder.AutoListBuilder"
        Height="280" 
        Width="200" 
        mc:Ignorable="d"
    
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">

    <UserControl.Resources>
        <Style x:Name="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="3" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal" />
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="SelectionStates">
                                    <vsm:VisualState x:Name="Unselected" />
                                    <vsm:VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
                            <Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
                            <ContentPresenter
            x:Name="contentPresenter"
            Content="{TemplateBinding Content}"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            HorizontalAlignment="Left"
            Margin="{TemplateBinding Padding}"/>
                            <Rectangle x:Name="FocusVisualElement" Stroke="#FF45D6FA" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
                            <Rectangle x:Name="DummyRectForDoubleClick" Fill="Transparent" Loaded="DummyRectForDoubleClick_Loaded" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Border 
        BorderBrush="Aquamarine" 
        BorderThickness="3" 
        CornerRadius="8" 
        Margin="0,0,0,0">
        
        <Canvas 
            Background="Transparent"  
            Margin="5">
            <input:AutoCompleteBox 
                x:Name="_autocompletebox"   
                Width="184" 
                Height="30" 
                ValueMemberPath="description"
                FilterMode="Contains"
                MinimumPrefixLength="1"
                HorizontalAlignment="Stretch"
                IsTextCompletionEnabled="True"
                KeyUp="_autocompletebox_KeyUp"
                FontSize="13"
                >
                <input:AutoCompleteBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding description}" />
                    </DataTemplate>
                </input:AutoCompleteBox.ItemTemplate>
            </input:AutoCompleteBox>
            <ListBox 
				x:Name="_listbox"
				Height="232" 
				Canvas.Top="32" 
				Width="184"
                Margin="0,2,0,0"
                ItemsSource="{Binding}"
                ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock  
								Margin="3" 
								Text="{Binding description}" 
								FontSize="13" 
								FontWeight="Bold" 
								VerticalAlignment="Center" 
								HorizontalAlignment="Center"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Canvas>
        
        </Border>
   
</UserControl>